<template>
    <div class="boxss">
        <div class="titles">库存总览</div>

        <div class="box">
            <el-table :data="tableData" stripe style="width: 100%"  class="outer-border-only" v-if="checkPermi(['home:Inventory:statistics'])">

                <el-table-column prop="state" label="商品状态" width="120" align="center">
                    <template slot-scope="scope">

                        {{ getState(scope.row.state) }}

                    </template>
                </el-table-column>

                <el-table-column prop="count" label="数量" align="center">
                </el-table-column>

                <el-table-column prop="cost" label="总成本(¥)" align="center">

                </el-table-column>

                <el-table-column prop="price" label="总估值(¥)" align="center">

                </el-table-column>

                <el-table-column label="" align="center">
                    <template slot-scope="scope">
                        <img @click="goUrl(scope.row.state)" class="imgs-jiantou" src="@/assets/img/index/comp10-1.png" alt="">
                    </template>
                </el-table-column>

            </el-table>
             <el-empty v-else :image-size="100" description="您还没有该模块权限,请联系管理员分配权限!"></el-empty>
        </div>
    </div>
</template>
<script>
import homeApi from "@/api/home/newIndex";
export default {
    name: 'Comp10',
    data() {
        return {
            tableData: [

            ]
        }
    },
    created() {
        this.getTongjiData()
    },
    methods: {

        getTongjiData() {
            homeApi.getView().then(res => {
                this.tableData = res.data
            })
        },
        getState(state) {
            const stateMap = {
                0: '待审核',
                1: '未出售',
                2: '出售中',
                3: '已售',
                4: '已下架',
                5: '问题账号',
                6: '找回账号'
            }
            return stateMap[state] || ''
        },
        //根据商品类型跳转
        goUrl(state) {
            let dataMap = {
                0: { path: '/tenantGoods/goodsCheck', query: { type: 'check' }, permiStr: 'goods:list:check' },
                1: { path: '/tenantGoods/goodsManage', query: { type: 'myAccount', saleState: 1 }, permiStr: 'goodsManage' },
                2: { path: '/tenantGoods/goodsManage', query: { type: 'myAccount', saleState: 2 }, permiStr: 'goodsManage' },
                3: {
                    path: '/tenantGoods/goodsManage', query: {
                        type: 'myAccount', saleState: 3, sort: 'descending'
                        , sortColumn: 'saletime'
                    }, permiStr: 'goodsManage'
                },
                4: {
                    path: '/tenantGoods/goodsManage', query: {
                        type: 'myAccount', saleState: 4, sort: 'descending'
                        , sortColumn: 'changeTime'
                    }, permiStr: 'goodsManage'
                },
                5: { path: '/tenantGoods/goodsManage', query: { type: 'myAccount', saleState: 5 }, permiStr: 'goodsManage' },
                6: { path: '/tenantUtils/jiankongfenzu', query: {}, permiStr: 'jiankongfenzu' },
            }
            const config = dataMap[state];
            console.log(config);
            if (config.permiStr && !this.checkPermi([config.permiStr])) {
                return this.$message.error(
                    "你还没有该模块权限，请联系管理员分配权限！"
                );
            }
              this.$router.push({
            path: config.path,
            query: {
              ...config.query,
            },
          });
        }

    }
}
</script>
<style lang="scss" scoped>
@import url('./style.css');
.boxss {
    height: 100%;
      display: flex;
  flex-direction: column;
  justify-content: center;
    .titles {
        height: 20px;
    }
    .box {
      
        overflow-y: auto;
    }
}
.box {
    margin-top: 16px;
}

// 只保留最外层边框的样式
::v-deep .el-table.outer-border-only {
    border: 1px solid #EBEEF5;
    border-radius: 4px;

    // 移除所有内部边框
    .el-table__header-wrapper,
    .el-table__body-wrapper {

        .el-table__header,
        .el-table__body {

            th.el-table__cell,
            td.el-table__cell {
                border-bottom: none;
                border-right: none;
            }
        }
    }

    // 设置表格行字体样式
    .el-table__body-wrapper {
        .el-table__body {

            tr {
                font-size: 14px;
                color: #000;
            }
        }
    }

    // 移除表格默认边框
    &::before,
    &::after {
        display: none;
    }

    // 移除列之间的边框
    .el-table__border-left-patch {
        display: none;
    }
}

.imgs-jiantou {
    cursor: pointer;
    width: 16px;
}
</style>